import React, { Component } from 'react'
import './index.css'

/* 
生命周期: 在不同的阶段会调用特定的一些方法  (钩子: 生命周期回调函数)

- 挂载
  - 触发: render组件标签
  - 方法:  constructor => render => componentDidMount
- 更新
  - 触发: setState()更新状态(当前组件/父组件)
  - 方法: render => componentDidUpdate
- 卸载
  - 触发: 条件渲染不再满足条件
  - 方法: componentWillUnmount
*/
export default class LifeTest extends Component {

  state = {
    msg: 'abc'
  }

  constructor() {
    super()
    console.log('constructor')
  }

  render() {
    console.log('render')
    const {msg} = this.state
    const {count} = this.props

    return (
      <div className="life-test">
        <h2>LifeTest</h2>
        <p>state.msg: {msg}</p>
        <p>props.count: {count}</p>
        <button onClick={() => this.setState({msg: msg + '-'})}>更新msg</button>
      </div>
    )
  }

  // 调动异步任务: 发送ajax/启动定时器  初始化执行一次
  componentDidMount () {
    console.log('componentDidMount')
    // 注意: 需要将定时器的id保存到组件对象上, 用于在其它钩子中读取
    this.intervalId = setInterval(() =>  {
      console.log('定时器回调')
      this.setState({
        msg: this.state.msg + '+'
      })
    }, 1000);
  }

  componentDidUpdate () {
    console.log('componentDidUpdate')
  }

  // 做一些收尾工作: 清除定时器
  componentWillUnmount () {
    console.log('componentWillUnmount')
    clearInterval(this.intervalId)
  }
}
